import './ScrollView.scss';

import React from 'react';

class ScrollView extends React.Component {
  constructor(props) {
    super(props);

    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll);
  }

  onScroll() {
    if (this.props.isEnd) {
      return;
    }
    // 视窗高度
    const { clientHeight } = document.documentElement;
    // 页面高度
    const { scrollHeight } = document.body;
    // 滚动的高度
    const { scrollTop } = document.documentElement;
    const offsetY = 30;

    if ((clientHeight + scrollTop + offsetY) >= scrollHeight) {
      if (this.props.scrollCallback) {
        this.props.scrollCallback();
      }
    }
  }

  render() {
    return (
      <div className="scroll-view">
        {this.props.children}
      </div>
    );
  }
}

export default ScrollView;
